import React, { Component } from 'react';
import {Switch, Route, NavLink} from 'react-router-dom'
import Comson1 from './ComSon1';
import Comson2 from './ComSon2';
import Comson3 from './ComSon3';
import { Button, Table, Tag, Space } from 'antd';

class Comfather extends Component {
  constructor() {
    super();
    this.state = {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: text => <a>{text}</a>,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: 'Tags',
          key: 'tags',
          dataIndex: 'tags',
          render: tags => (
            <>
              {tags.map(tag => {
                let color = tag.length > 5 ? 'geekblue' : 'green';
                if (tag === 'loser') {
                  color = 'volcano';
                }
                return (
                  <Tag color={color} key={tag}>
                    {tag.toUpperCase()}
                  </Tag>
                );
              })}
            </>
          ),
        },
        {
          title: 'Action',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              <a>Invite {record.name}</a>
              <a>Delete</a>
            </Space>
          ),
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ]
    }
  }
  render() {
    return (
      <div>
        <Button type="primary">Primary Button</Button>
        <p>我是父组件，内部有会切换的子组件</p>
        <p>嵌套路由-和vue不同，嵌套路由的代码放在父组件中</p>
        {/* path要写完整的路由，不能只写子路由！ */}
        <Switch>
          <Route path="/comfather/son1" component={Comson1}></Route>
          <Route path="/comfather/son2" component={Comson2}></Route>
          <Route path="/comfather/son3" component={Comson3}></Route>
        </Switch>
        <hr />
        <NavLink to="/comfather/son1">子组件1</NavLink>
        <NavLink to="/comfather/son2">子组件2</NavLink>
        <NavLink to="/comfather/son3">子组件3</NavLink>
        <hr />
        <Table columns={this.state.columns} dataSource={this.state.data} />
      </div>
    );
  }
}

export default Comfather;
